{% load full_time %}
{% load problem_index %}
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动排行榜 - {{ contest.title }} - {{ web_config.title }}</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/app/master.css?1.0.4"/>
    <script type="text/javascript" src="/static/library/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js?1.0.4"></script>
    <script type="text/javascript" src="/static/library/html2canvas.min.js"></script>
    <script type="text/javascript" src="/static/library/wejudge.contest.board.js"></script>
    <script type="text/javascript" src="/static/library/wejudge.grestp.js"></script>
    <script type="text/javascript" src="/static/library/wejudge.modalbox.js"></script>
    <script type="text/javascript" src="/static/library/jquery.scrollTo.min.js"></script>
    <style type="text/css">
    table{
        background: #34495e;
        color: #fff;
        font-size:16px;
    }
    table thead td {
        background: #2c3e50;
        border: 1px solid #000 !important;
    }
    td {
        vertical-align: middle !important;
        text-align: center ;
        border: 1px solid #000 !important;
        height: 60px;
    }
    .board_highlight td {
        background: #3498db  !important;
    }
    td.proc{
        background: #f1c40f !important;
    }
    td.proc.animated{
        animation: proc_animation;
        animation-duration: 100ms;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    @keyframes proc_animation {
        from{
            background: #f1c40f;
        }
        to{
            background: #2c3e50;
        }
    }
    td.ac {
        background: #2ecc71  !important;
    }
    td.noac{
        background: #e74c3c !important;
    }
    td.first_blood{
        background: #008800 !important;
    }
    #procbar{
        background: #f00;
        height: 4px;
        position: fixed;
        top:0;
    }
    #TeamIdCard{
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 640px;
        height: 300px;
        margin-left: -300px;
        margin-top: -150px;
        border: 1px solid #2c3e50;
        background: #fff;
        clear: both;
    }
    #TeamIdCardImgLayout{
        width: 280px;
        height:2980px;
        float:left;
        text-align: center;
        line-height:298px;
    }
    #TeamIdCardContent{
        padding: 25px;
        width: 300px;
        height:249px;
        float:left;
    }
    </style>
</head>
<body>
    <div class="header_container">
        <h1>{{ contest.title }} <small>{{ contest.start_time | full_time }} - {{ contest.end_time | full_time }}</small></h1>
    </div>
    <div class="page_container">
        <table id="board" class="table table-bordered">
            <thead>
            <tr>
                <td width="80">Rank</td>
                <td>User</td>
                <td width="80">Solved</td>
                <td width="100">Time</td>
                {% for cproblem in cproblem_list %}
                <td width="80">{{ cproblem.index | problem_index }}</td>
                {% endfor %}
            </tr>
            </thead>
            <tbody id="RankBoardBody">

            </tbody>
        </table>
        <div id="RankBoardOption" align="center">
            展示队伍名片从第<input id="award_at" type="text" value="25">名开始。
            <button class="btn btn-success" id="btn_start_board">开始滚榜</button>
        </div>
    </div>

    <div id="loading_layout" style="display: none;" align="center"><img src="/static/images/loader.gif" alt=""><br />少女祈祷中...</div>
    <div id="MoveItemImgContainer" style="position:absolute; display: none">
        <img id="MoveItemImgBody" src="" alt="">
    </div>
    <div id="TeamIdCard">
        <div id="TeamIdCardImgLayout">
            <img src="" width="240" height="240" alt="" id="TeamIdCardImg">
        </div>
        <div id="TeamIdCardContent">

        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#btn_start_board").click(function () {
                $("#loading_layout").show();
                $("#RankBoardOption").hide();
                WeJudgeBoard.api = "{% url 'contest_get_rank_board_datas' contest.id %}";
                WeJudgeBoard.idCardDuration = 3000;
                WeJudgeBoard.award_rank = parseInt($("#award_at").val());
                //WeJudgeBoard.api = "https://oj.bnuz.edu.cn/contest/4/rank/board/json";
                WeJudgeBoard.startBoard();
            })
        });
    </script>
</body>
</html>
